<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>欢迎页面</title>
<link rel="stylesheet" href="<%=basePath %>backPage/effectsResource/css/style.css">
</head>
<script>

	window.onload = function(){
			var span = document.getElementsByTagName('span')[1];
			var dateStr = formatDate();
			// 将时间放置到span内
			span.innerText = dateStr;
			// 每隔一秒，再放置一次最新的时间
			setInterval(function(){
				span.innerText = formatDate();
			},1000);
			//格式化年月日时分秒 
			function formatDate(){
				var date = new Date();
				var year = date.getFullYear();
				var isLeapYear = "";
				if((year%100!=0 && year%4 == 0) || year%400 == 0){
					isLeapYear += "闰年";
				}else{
					isLeapYear += "平年";
				}
				var month = date.getMonth()+1;
				month = month<10?'0'+month:month;
				var day = date.getDate();
				day = day<10?'0'+day:day;
				var hours = date.getHours();
				hours = hours<10?'0'+hours:hours;
				var minutes = date.getMinutes();
				minutes = minutes<10?'0'+minutes:minutes;
				var seconds = date.getSeconds();
				seconds = seconds<10?'0'+seconds:seconds;
				// 2019-07-23 09:40:30
				return '日期：'+year+'年'+month+'月'+day+'日  '+hours+':'+minutes+':'+seconds+' '+isLeapYear;
			}

		}
</script>
<body>
<div style="margin-top: 40px; margin-left: 20px;">
	<c:if test="${not empty userInfo }">
		<h1>欢迎：${userInfo.name }管理登录</h1>
	</c:if>
	<h1>
		<span>名己：今天依然要保持好心情哦！</span>
		<br/>
		<span id="dateShow"></span>
	</h1>
</div>
<h3 style="writing-mode:tb-rl;margin-top: -120px;margin-left: 637px;">
		给自己打个气
</h3>
<main>
  <div class="sliderContainer" style=" margin-top: -580px;">
    <div class="ballon" ref="ballonEl">
      <span class="ballon__text" ref="ballonTextEl">{{ percent }}</span>
    </div>
    <div v-on:mousedown="dragStart" v-on:touchstart="dragStart" ref="thumbEl" class="sliderContainer__thumb"></div>
    <div class="sliderContainer__input" ref="inputEl"></div>
  </div>
</main>
<h2><span>嘿</span></h2>
<script src='<%=basePath %>back/effectsResource/js/vue.min.js'></script>
<script src='<%=basePath %>back/effectsResource/js/hammer.min.js'></script>
<script src='<%=basePath %>back/effectsResource/js/TweenMax.min.js'></script>
<script src="<%=basePath %>back/effectsResource/js/script.js"></script>
</body>
</html>